<template>
	<div class="page-container">
		<el-form :model="userForm" inline>
		  <el-form-item label="用户名" >
			<el-input v-model="userForm.userName" placeholder="请输入用户名"></el-input>
		  </el-form-item>
		  <el-form-item label="手机号">
			<el-input v-model="userForm.phone" placeholder="请输入用户名"></el-input>
		  </el-form-item>
		  <el-form-item label="角色">
			<el-select v-model="userForm.roles" placeholder="选择角色" style="width:200px">
			  <el-option label="管理员" value="1"></el-option>
			  <el-option label="客服" value="2"></el-option>
			</el-select>
		  </el-form-item>
		  <el-form-item >
			<el-button type="primary">搜索</el-button>
			<el-button >重置</el-button>
		  </el-form-item>
		</el-form>
		<el-row>
			<el-col :span="24">
				<el-button type="primary" @click="handleOpen">新增</el-button>
				<el-button type="danger">删除</el-button>
			</el-col>
		</el-row>
		<el-table :data="tableData">	
		  <el-table-column label="ID" prop="id"></el-table-column>
		  <el-table-column label="用户名" prop="userName"></el-table-column>
		  <el-table-column label="手机号" prop="phone"></el-table-column>
		  <el-table-column label="角色" prop="roleName">
			<template #default="scope">
				{{roleName(scope.row.roles)}}
			</template>
		  </el-table-column>
		  <el-table-column label="状态" prop="status">
			<template #default="scope">
				<el-switch v-model="scope.row.status" active-value="1" inactive-value="0" @change="changeStatus(scope.row)" />
			</template>
		  </el-table-column>
		  <el-table-column fixed="right" label="操作" width="120">
				<template #default="scope">
					<el-button link type="primary" size="small" @click="handleOpen(scope.row)" >修改</el-button>
					<el-button link type="primary" size="small" @click="deleteUser(scope.row.id)">删除</el-button>
					<el-button link type="primary" size="small" @click="handleOpenPass(scope.row)">重置密码</el-button>
				</template>
		   </el-table-column>
		</el-table>
		<el-pagination size="small" v-model:page="userForm.pageNum" 
		v-model:limit="userForm.pageSize"
		 layout="prev, pager, next" :total="total" 
		 :current-page="currPageCount" @current-change="handleCurrentChange"/>

		<el-dialog
			v-model="dialogVisible"
			title="编辑用户"
			width="50%"
			:before-close="handleClose"
		>
			<el-form :model="userFormData" inline ref="userFormDataRef" label-width="120" :rules="rules">
				<el-row>
				  <el-col :span="userFormData.id?24:12">
					<el-form-item label="用户名" prop="userName">
						<el-input v-model="userFormData.userName" placeholder="填写角色名称" style="width: 100%;"></el-input>
					</el-form-item>
				  </el-col>
				  <el-col :span="12" v-if="!userFormData.id">
					<el-form-item label="登录密码" prop="passWord">
						<el-input type="password" show-password v-model="userFormData.passWord" placeholder="填写登录密码"></el-input>
					</el-form-item>
				  </el-col>
				</el-row>
				<el-row>
				  <el-col :span="12">
					<el-form-item label="性别" >
						<el-radio value="1" v-model="userFormData.sex">男</el-radio>
						<el-radio value="0" v-model="userFormData.sex">女</el-radio>
					</el-form-item>
				  </el-col>
				  <el-col :span="12">
					<el-form-item label="手机号">
						<el-input v-model="userFormData.phone" placeholder="填写手机号"></el-input>
					</el-form-item>
				  </el-col>
				</el-row>
				<el-row>
				  <el-col :span="24">
					<el-form-item label="用户角色">
						<el-select v-model="userFormData.roles" multiple placeholder="选择角色" style="width:200px">
							<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				  </el-col>
				</el-row>
			</el-form>
			<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">
				提交
				</el-button>
			</span>
			</template>
		</el-dialog>

		<el-dialog
			v-model="dialogUpdateVisible"
			title="修改密码"
			:before-close="handleUpdateClose"
			style="width: 30%;"
		>
		<el-form :model="passwordFormData" inline ref="passwordFormDataRef" label-width="120" >
			<el-form-item label="新密码">
				<el-input  v-model="passwordFormData.newPassWord" placeholder="输入新密码"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitPassForm">
				提交
				</el-button>
			</span>
		</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="makeTableDemo">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { ElMessageBox ,ElMessage  } from 'element-plus';
import {pageList, addOrUpdate, userDelById,updatePass} from '@/api/system/user'
import { rolePageList } from '@/api/system/role';

// 引入组件
// const Table = defineAsyncComponent(() => import('@/components/pageTable.vue'));
// const TableSearch = defineAsyncComponent(() => import('@/components/pageSearch.vue'));

// 定义变量内容
const passwordFormData = ref({
	id:null,
	newPassWord:null
})
const dialogVisible = ref(false)
const dialogUpdateVisible = ref(false)
const userFormDataRef=ref(null)
const total=ref(0)
const currPageCount=ref(0)
const userForm = reactive({
	userName:null,
	phone:null,
	status:null,
	roles:null,
	pageSize:10,
	pageNum:1
});

const userFormData = reactive({
	id:null,
	userName:null,
	passWord:null,
	sex:null,
	roles:[],
	phone:null
})

const tableData = ref([])
const rules = ref({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  passWord: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})

//修改密码
function submitPassForm(){
	updatePass(passwordFormData.value).then((resp:any)=>{
		if(resp.code==200){
			ElMessage({ message: '修改成功', type: 'success', })
			dialogUpdateVisible.value = false
			userList()
		}
		
	})
}

function handleOpenPass(row:any){
	dialogUpdateVisible.value = true
	passwordFormData.value.id = row.id
}

//关闭修改密码窗口  
function handleUpdateClose(){
	dialogUpdateVisible.value = false
}
function deleteUser(id:Number){
	ElMessageBox.confirm(
		'确认要删除用户吗?',
		'Warning',
		{
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		}
	)
    .then(() => {
		userDelById(id).then((resp:any)=>{
		ElMessage({ message: '删除成功', type: 'success', })	
		userList()
		})
    })
    	
}

//修改状态
function changeStatus(row:any){
	addOrUpdate(row).then((resp:any)=>{
		ElMessage({ message: '提交成功', type: 'success', })	
		handleClose()
		userList()
		resertFrom()
	})
}
//提交
function submitForm(){
	userFormDataRef.value.validate((valid)=>{
		if(valid){
			addOrUpdate(userFormData).then((resp:any)=>{
				ElMessage({ message: '提交成功', type: 'success', })	
				handleClose()
				userList()
				resertFrom()
			})
		}
	})
	
}	

function resertFrom(){
	Object.assign(userFormData, {
		id:null,
		userName:null,
		passWord:null,
		sex:null,
		roles:[],
		phone:null
	});
}
//打开弹出框
function handleOpen(val:any){
	dialogVisible.value = true
	resertFrom()
	if(val){
		Object.assign(userFormData, val);
	}
}
function roleName(val:any){
	console.log(val[0])
	if(val){
		let roleName='';
		for(let i=0;i<roleList.value.length;i++){
			console.log(roleList.value[i].id)
			for(let j=0;j<val.length;j++){
				if(roleList.value[i].id==val[j]){
					roleName +=roleList.value[i].name+','
					console.log(roleName)
				}
			}
		}
		return roleName;
	}
}
//关闭弹出框
function handleClose(){
	dialogVisible.value = false
}

function userList(){
	pageList(userForm).then((resp:any)=>{
		tableData.value = resp.data.records
		total.value = resp.data.total
		currPageCount.value = resp.data.current
	})
}

//点击分页
function handleCurrentChange(val: any) {
      console.log(`当前页: ${val}`);
	  userForm.pageNum = val
	  userList()
}
const roleList = ref([])
function getRoleList(){
	rolePageList({pageSize:100,pageNum:1}).then(((resp:any)=>{
		console.log(resp)
		roleList.value = resp.data.records

	}))
};
// 页面加载时
onMounted(() => {
	getRoleList()
	userList()
});

</script>

<style scoped lang="scss">
.page-container {
    height: 100%;
	background-color: #fff;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    .pageContent {
        height: calc(100% - 140px);
        flex: 1;
    }
}
</style>
